<template>
  <view class="container">
    <uni-nav-bar title="发布宝贝" backgroundColor="rgb(55,138,241)" color='white'></uni-nav-bar>
    <view class="image-content">
      <image src="@/static/pdficon.jpeg" mode="aspectFit"></image>
    </view>
    <view class='borderline'></view>

    <uni-forms ref='form' :modelValue="formData" :rules="rules">
      <uni-forms-item label="名称" name="name" required>
        <uni-easyinput type="text" v-model="formData.name" placeholder="请输入文件名称"/>
      </uni-forms-item>
      <view class='borderline'></view>
      <uni-forms-item label="价格" name="money" required>
        <uni-easyinput type="text" v-model="formData.money" placeholder="请输入金额"/>
      </uni-forms-item>
      <view class='borderline'></view>
      <uni-forms-item label="详细说明" name="info" labelWidth=70 required>
        <uni-easyinput type="textarea" autoHeight v-model=" formData.info" placeholder="请输入内容"/>
      </uni-forms-item>
      <uni-forms-item label="" name="document" required>
        <uni-file-picker limit="1" file-mediatype="doc,docx,pdf" title="只能选择一个文件"  v-model="formData.document"
                         :autoUpload="false" ref="files" @select="select">
        </uni-file-picker>
      </uni-forms-item>
    </uni-forms>
    <button class="button" @click="submit">上传文件</button>
  </view>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js">
</script>
<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        money: '',
        info: '',
        document: [],
        file: {}
      },
      rules: {
        //对name字段进行必填验证
        name: {
          // name 字段的校验规则
          rules: [
            // 校验 name 不能为空
            {
              required: true,
              errorMessage: '请填写姓名',
            },
            // 对name字段进行长度验证
            {
              minLength: 5,
              maxLength: 50,
              errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
            }
          ],
          // 当前表单域的字段中文名，可不填写
          label: '文件名',
        },
        //对money字段进行必填验证
        money: {
          rules: [{
            required: true,
            errorMessage: '金额不能为空'
          }, {
            format: 'number',
            errorMessage: '金额只能输入数字'
          }]
        },
        //对info字段进行必填验证
        info: {
          rules: [{
            required: true,
            errorMessage: '信息不能为空'
          }]
        },
        //对document字段进行必填验证
        document: {
          rules: [{
            required: false,
            errorMessage: '请再按一次'
          }]
        }
      }
    }
  },
  methods: {
    select(e){
      console.log(e)
      this.formData.file = e.tempFiles[0].file
    },
    submit() {
      // 通过ref属性获取页面中的upload方法
      // upload方法是uniapp提供的
      let that = this
      console.log('document:',this.formData.document)
      console.log('files',this.$refs.files)
      // this.$refs.files.upload();
      this.$refs.form.validate().then(res => {
        console.log('表单数据信息：', res);

        //表单校验成功后，访问上传文件接口
        that.$axios.post('/goods/create', {
          name: that.formData.name,
          price: that.formData.money,
          introduction: that.formData.info,
          file: that.formData.file
        }, {
          headers: {
            'token': localStorage.getItem('token'),
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.data.code === 200 || res.data.code === '200') {
            //后台返回成功后，进行页面跳转
            uni.showToast({
              title: '请求成功'
            })

            uni.navigateTo({
              url: '/pages/upload/uploadSuccess'
            })
          }else {
            uni.showToast({
              title: res.data.msg
            })
          }
        })
      }).catch(err => {
        console.log('表单错误信息：', err);
      })
    }
  }
}
</script>


<style>
.container {
  padding: 0px;
  font-size: 14px;
  line-height: 24px;
}

image {
  width: 200px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

.borderline {
  background-color: gainsboro;
  height: 16px;
  margin-bottom: 4px;
}

.example-body {
  /* padding: 100px 100px;
  padding-top: 0; */
  /* margin-top: 50px; */
  text-align: center;
}

.button {
  width: 100px;
  color: aliceblue;
  background-color: rgb(55, 138, 241);
}
</style>
